<template>
    <!-- 我们一般用class来设定样式 -->
    <div class="person">
        <!-- html标签要想使用vue定义的属性，需要使用插值语法{{  }}就是两队大括号 -->
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <!-- @是动态绑定，其实是v-modevl属性的缩写 -->
         <!-- 我们通过动态绑定 为这个按钮的点击事件(click)绑定了一个函数叫showTel，也就是一点击就执行showTel函数 -->
        <button @click="showTel">点我显示联系电话</button>
    </div>
</template>

<script lang="ts">
  export default{
    name :'Person',  //组件名
    data() {//设置数据 属性  所有的属性都放在data()函数的return返回值中
        return {
            name:'张三',
            age:25,
            tel:13636363366
        }
    },
    methods: { //函数 ，所有的函数都放在methods对象中
        showTel(){
            alert(this.tel)
        }
    },
  }
</script>

<style scoped>
    .person{
        background-color:aquamarine;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>

